window.addEventListener("load", () => {
	// 轮播图插件
	var mySwiper = new Swiper(".swiper", {
		autoplay: true,
		pagination: {
			el: ".swiper-pagination",
			clickable: true,
		},
		autoplay: {
			disableOnInteraction: false,
			delay: 1000,
		},
	});
	// 轮播图分页器
	for (i = 0; i < mySwiper.pagination.bullets.length; i++) {
		mySwiper.pagination.bullets[i].onmouseover = function () {
			this.click();
		};
	}

	// 首页云服务卡片渲染
	const serveArr = [
		{
			img: "service01.svg",
			title: "API私有化服务",
			subTitle: "可部署本地 & 专有云的Web API",
		},
		{
			img: "service02.svg",
			title: "API私有化服务",
			subTitle: "可部署本地 & 专有云的Web API",
		},
		{
			img: "service03.svg",
			title: "API私有化服务",
			subTitle: "可部署本地 & 专有云的Web API",
		},
		{
			img: "service04.svg",
			title: "API私有化服务",
			subTitle: "可部署本地 & 专有云的Web API",
		},
	];
	// 渲染遍历
	serveArr.forEach((v) => {
		$(".serve ul").innerHTML += `<li>
										<img src="../imgs/${v.img}" />
										<h3 class="fs-20 lh-36 ml-22">${v.title}</h3>
										<p class="fs-12 lh-20 ml-22">${v.subTitle}</p>
										<a href="#" class="ml-22">去搜索</a>
									</li>`;
	});

	// 首页api分类卡片渲染
	const classArr = [
		{
			img: "api01.svg",
			title: "生活服务",
		},
		{
			img: "api02.svg",
			title: "生活服务",
		},
		{
			img: "api03.svg",
			title: "生活服务",
		},
		{
			img: "api04.svg",
			title: "生活服务",
		},
		{
			img: "api05.svg",
			title: "生活服务",
		},
		{
			img: "api06.svg",
			title: "生活服务",
		},
		{
			img: "api07.svg",
			title: "生活服务",
		},
		{
			img: "api08.svg",
			title: "生活服务",
		},
		{
			img: "api09.svg",
			title: "生活服务",
		},
		{
			img: "api010.svg",
			title: "生活服务",
		},
	];
	// // 渲染遍历
	classArr.forEach((v) => {
		$(".api ul").innerHTML += `<li class="flx-col bg-white">
										<img src="../imgs/${v.img}" />
										<span class="fs-16">${v.title}</span>
								   </li>`;
	});

	// api分类卡片交互效果
	$(".api ul li").forEach(function (v, i) {
		// 鼠标移入
		v.addEventListener("mouseover", () => {
			v.firstElementChild.src = `../imgs/api0${i + 1}-c.svg`;
		});
		// 鼠标移出
		v.addEventListener("mouseout", () => {
			v.firstElementChild.src = `../imgs/api0${i + 1}.svg`;
		});
	});

	// Master区文字列表交互效果
	$(".master ul li").forEach((v) => {
		v.addEventListener("mouseover", () => {
			v.style.boxShadow = "2px 5px 5px #95bff8";
		});
		v.addEventListener("mouseout", () => {
			v.style.boxShadow = "";
		});
	});

	// 独角兽区甲方轮播图
	let index = 0;
	window.setInterval(function () {
		index++;
		if (index >= $(".rotation .container").length) {
			index = 0;
		}
		$(".rotation .container").forEach((v) => {
			v.style.opacity = 0;
		});
		$(".rotation .container")[index].style.opacity = 1;
	}, 3000);

	// 回到顶部按钮出现位置
	window.onscroll = function () {
		if (document.documentElement.scrollTop >= 800) {
			$(".icon-huidaodingbu").style.opacity = 1;
		} else {
			$(".icon-huidaodingbu").style.opacity = 0;
		}
	};
	// 回到顶部按钮点击事件
	$(".icon-huidaodingbu").addEventListener("click", () => {
		window.scrollTo({
			top: 0,
			left: 0,
			behavior: "smooth",
		});
	});

	// 创建图片地址数组
	let picArr = [];
	for (let x = 2; x <= 100; x++) {
		picArr.push(`../aniIMGS/a${x}.png`);
	}
	// 动态渲染结构
	picArr.forEach((v) => {
		$("#aniBox").innerHTML += `<div style="background-image: url(${v})"></div>`;
	});
	// 动画旋转效果
	let x = 0;
	window.setInterval(() => {
		if (x >= 0 && x < 99) {
			$("#aniBox div")[x].classList.remove("on");
			$("#aniBox div")[x + 1].classList.add("on");
		}
		if (x === 99) {
			$("#aniBox div")[x].classList.remove("on");
			$("#aniBox div")[0].classList.add("on");
		}
		if (x === 100) {
			x = 0;
			$("#aniBox div")[x].classList.remove("on");
			$("#aniBox div")[x + 1].classList.add("on");
		}
		x++;
	}, 10);

	// 绑定点击播放音乐效果
	let flag = true;
	$("#sing").addEventListener("click", () => {
		if (flag) {
			$("audio").muted = false;
			$("audio").play();
			$("#sing").textContent = "点击暂停音乐";
			flag = !flag;
		} else {
			$("audio").muted = true;
			$("audio").pause();
			$("#sing").textContent = "点击听我唱歌";
			flag = !flag;
		}
	});
});
